<template>
	<view class="con">
		<view ></view>
		<view class="posifi top0 width92vw zindex5 bgF3F5F7" :style="{paddingTop:shh+'px'}">
			<view class="flex-ju-b " >
				<uni-icons @click="back" type="left" size="22" color="#000"></uni-icons>
					<image mode="widthFix" class="flex image width207" src="/static/dancimanghe.png"></image>
					<view class="width22"></view>
			</view>
		</view>
		
		<view class="mt190"></view>
		<view class="bgfff ra20 pg30 pb150">
			<view class="flex-ju-b ">
				<view @clcik="voice(info.audioUrl)" class="flex-a-i size60 bold">
					{{info.entry}}
					<image mode="widthFix" src="/static/yuyin.png" class="image flex width42"></image>
				</view>
				<image @click="tapopen" mode="widthFix" :src="info.isCollect?'/static/xings.png':'/static/xing.png'" class="image width42"></image>
			</view>
			<view v-if="info.type==1" class="flex-a-i color666 size24 mt20">
				<view @click="voice(info.ukUrl)" class="flex-a-i">{{info.ukPhonetic}} <image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image></view>
				<view @click="voice(info.usUrl)" class="ml50 flex-a-i">{{info.usPhonetic}} <image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image></view>
			</view>
			<view v-else class="color666 size28 mt20">{{info.definition}}</view>
			<view class="mt30">
				<mp-html :content="info.explanation" />
			</view>
			<view class="posifi bottom0 width100vw bgfff left0" style="box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0,0,0,0.06);border-top-right-radius: 30rpx;border-top-left-radius: 30rpx;" :style="{paddingBottom:bhh+'px'}">
				<view class="con mt20">
					<view class="flex-ju-a size32 ">
						<view @click="tapnext" class="flex-ju-c flex1 mr20 colorfff ra20 wh280-100 bg000">换一个</view>
						<view @click="togxue" class="flex-ju-c width438 colorfff ra20 wh280-100 bgFE4366">开始学习</view>
					</view>
				</view>
			</view>
		</view>
		
		<add ref="add" @collection="collection" :type="info.type" :wordId="info.entryId"></add>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
			}
		},
		onLoad() {
			this.http('/api/blind_box',{
			}).then(res=>{
				this.info=res.data
			})
		},
		methods: {
			tapnext(){
				this.http('/api/blind_box',{
				}).then(res=>{
					this.info=res.data
				})
			},
			togxue(){
				if(this.info.type==1){
					uni.navigateTo({
						url:"/pages/index/words_detail?id="+this.info.entryId+'&blindBoxId'+this.info.blindBoxId
					})
				}else{
					uni.navigateTo({
						url:"/pages/index/root_detail?id="+this.info.entryId+'&blindBoxId'+this.info.blindBoxId
					})
				}
			},
			collection(){
				this.toast('添加成功')
				this.info.isCollect=1
			},
			tapopen(){
				if(this.info.isCollect==1){
					this.http('/api/folder_favorite_relation/cancel',{
						entryId:this.info.entryId,
						type:this.info.type
					}).then(res=>{
						this.toast('已取消')
						this.info.isCollect=0
					})
				}else{
					this.$refs.add.open(1)
				}
			},
		}
	}
</script>

<style>
page{
	background: #F3F5F7;
}
</style>
